import { CalendarCheck, Flame } from 'lucide-react';
import { UserProfileDto } from '@/types/account/profile';

type Props = {
	profile: UserProfileDto;
};

export default function UserProfileStats({ profile }: Props) {
	return (
		<section className="user-profile__stats" aria-label="회원 활동 통계">
			<div className="user-profile__stat">
				<CalendarCheck size={20} className="user-profile__stat-icon user-profile__stat-icon--attendance" strokeWidth={1.75} />
				<div className="user-profile__stat-body">
					<span className="user-profile__stat-label">출석 수</span>
					<span className="user-profile__stat-value">{profile.attendanceCount.toLocaleString()}일</span>
				</div>
			</div>

			<div className="user-profile__stat">
				<Flame size={20} className="user-profile__stat-icon user-profile__stat-icon--streak" strokeWidth={1.75} />
				<div className="user-profile__stat-body">
					<span className="user-profile__stat-label">개근 일수</span>
					<span className="user-profile__stat-value">{profile.consecutiveDays.toLocaleString()}일</span>
				</div>
			</div>
		</section>
	);
}